import React, {Component} from 'react'
import ReactSelect from 'react-select'

interface InputSelectProps {
  options: any[]
  onChange: (value: any) => void
  placeholder?: string
  name: string
  isSearchable?: boolean
  isMulti?: boolean
  isDisabled?: boolean
  isLoading?: boolean
  isClearable?: boolean
  className?: string
  defaultValue?: any
  value?: any
  autoFocus?: boolean
  size?: 'sm' | 'lg'
  id?: string
  instanceId?: string
}

class InputSelect extends Component<InputSelectProps> {
  onChange = (value: any) => {
    const {onChange} = this.props
    onChange(value)
  }

  getValue = () => {
    let {value} = this.props
    return value
  }

  render() {
    const {
      defaultValue,
      isDisabled,
      isLoading,
      isClearable,
      isSearchable,
      options,
      placeholder,
      name,
      className,
      autoFocus,
      id,
      instanceId,
      size,
    } = this.props
    return (
      <ReactSelect
        id={id}
        autoFocus={autoFocus}
        className={
          'select ' +
          (size ? size : 'lg') +
          ' ' +
          (className ? className : '')
        }
        defaultValue={defaultValue}
        blurInputOnSelect={true}
        isDisabled={isDisabled}
        isLoading={isLoading}
        isClearable={isClearable}
        isSearchable={isSearchable}
        name={name}
        options={options}
        placeholder={placeholder ? placeholder : 'Выбрать…'}
        onChange={this.onChange}
        instanceId={instanceId}
        value={this.getValue()}
        classNamePrefix={'input-select'}
      />
    )
  }
}

export default InputSelect
